click the button to display the width and height of the image
code:
<div>
<h3>return the width/height of an image</h2>
<img id="foto-3" src="../images/4.jpg" alt="holidays" title="holidays photo 4"
width="307" height="198" style="margin: 0 auto;"/>
<div>
<p>click the button to display the width and height of the image</p>
<button onclick="showWidth()">show width and height</button>
<p id="picture4"></p>
<p id="picture5"></p>
</div>
</div>
<script>
function showWidth(){
var x = document.getElementById("foto-3").width;
var y = document.getElementById("foto-3").height;
document.getElementById("picture4").innerHTML = "width: " + x + "px";
document.getElementById("picture5").innerHTML = "height: " + y + "px";
}
</script>
code:
<div>
<h3>add an image element</h3>
<div>
<div id="trial" style=" width: 10vw; height: 10vw;"></div>
<p id="up" style="font-size: 1vw; font-weight: bold;"></p>
<button onclick="getFun()">click here</button><br>
<p id="down" style="color:red;font-size:1vw;font-weight:normal;"></p>
</div>
</div>
<script>
var up = document.getElementById("up");
up.innerHTML = "click on the button to add an image element";
var down = document.getElementById("down");
function getFun(){
var img = document.createElement("img");
img.src = "../images/1.jpg";
document.getElementById("trial").appendChild(img);
img.style.width = "20vw";
img.style.height = "10vw";
down.innerHTML = "image element added.";
}
</script>
add an element to a webpage
<div>
<h3>add an element to a webpage</h3>
<div>
<div id="another_trial" style=" width: 10vw; height: 10vw;"></div>
<p id="above" style="font-size: 1vw; font-weight: bold;"></p>
<button onclick="makeFun()">click here</button><br>
<p id="under" style="color:red;font-size:1vw;font-weight:normal;"></p>
</div>
</div>
<script>
var above = document.getElementById("above");
above.innerHTML = "click on the button to add an image element";
var under = document.getElementById("under");
function makeFun(){
var img = new Image();
img.src = "../images/2.jpg";
document.getElementById("another_trial").appendChild(img);
img.style.width = "20vw";
img.style.height = "10vw";
under.innerHTML = "image element added.";
}
</script>
<div class="grid_C">
<p id="een_A"></p>
<p>The number of images is: <span id="twee_B"><span></p>
<p id="drie_C"></p>
<p id="vier_D"></p>
</div>
<script>
var allImgs = document.getElementsByTagName("img");
document.getElementById("een_A").innerHTML = "total of images in this page: " + allImgs.length + " pictures";
let nummer = document.images.length;
document.getElementById("twee_B").innerHTML = nummer;
var imgCount = document.images.length;
var svgCount = document.getElementsByTagName('svg').length;
var finalCount = imgCount + svgCount;
document.getElementById("drie_C").innerHTML = "total number of pictures: " + finalCount;
function countImages(){
var images = document.getElementsByTagName('IMG');
var count = images.length;
document.getElementById('vier_D').innerHTML= "grand total of pictures: " + count;
}
countImages();
</script>
example: list of all the pictures in the webpage.
code:
<div class="grid_C">
<p id="vijf_E"></p>
<p id="zes_F"></p>
<p id="zeven_G"></p>
<p id="acht_H"></p>
</div>
<script>
var imgTags = document.getElementsByTagName('img');
// Loop through each <img> tag and extract the image file name
for (var i = 0; i < imgTags.length; i++) {
var imgTag = imgTags[i];
var imgSrc = imgTag.src;
console.log(imgSrc);
document.getElementById("vijf_E").innerHTML += imgSrc + "<br>";
}
Array.prototype.map.call(document.images, function (i) { console.log('image', i.src); });
Array.prototype.map.call(document.images, function (i) { document.getElementById("zes_F").innerHTML += 'image: '+ (i.src) + "<br>"; });
const getImages = (el, includeDuplicates = false) => {
const images = [...el.getElementsByTagName('img')].map(img =>
img.getAttribute('src') + "<br>"
);
return includeDuplicates ? images : [...new Set(images)];
};
document.getElementById("zeven_G").innerHTML = getImages(document, true);
document.getElementById("acht_H").innerHTML = getImages(document, false);
</script>
lightbox - a modal image gallery, using CSS and JavaScript
code:
<div>
<!-- The grid: four columns -->
<div class="row">
<div class="column"><img src="../images/6.jpg" alt="Shanghai" width="50%" onclick="myFunction(this);"></div>
<div class="column"><img src="../images/7.jpg" alt="Shanghai" width="50%" onclick="myFunction(this);"></div>
<div class="column"><img src="../images/8.jpg" alt="Shanghai" width="50%" onclick="myFunction(this);"></div>
<div class="column"><img src="../images/9.jpg" alt="Shanghai" width="50%" onclick="myFunction(this);"></div>
</div>
<!-- The expanding image container -->
<div class="container">
<!-- Close the image -->
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<!-- Expanded image -->
<img id="expandedImg" style="width:80%">
<!-- Image text -->
<div id="imgtext"></div>
</div>
</div>
<style>
/* The grid: Four equal columns that floats next to each other */
.column {float: left; width: 25%; padding: 10px; }
/* Style the images inside the grid */
.column img {opacity: 0.8; cursor: pointer;}
.column img:hover { opacity: 1;}
/* Clear floats after the columns */
.row:after {content: ""; display: table; clear: both;}
/* The expanding image container (positioning is needed to position the close button and the text) */
.container {position: relative; display: none;}
/* Expanding image text */
#imgtext {position: absolute; bottom: 15px; left: 15px; color: white; font-size: 20px;}
/* Closable button inside the image */
.closebtn {position: absolute; top: 10px; right: 25px; color: blue; font-size: 35px; cursor: pointer; }
</style>
<script>
function myFunction(imgs) {
// Get the expanded image
var expandImg = document.getElementById("expandedImg");
// Get the image text
var imgText = document.getElementById("imgtext");
// Use the same src in the expanded image as the image being clicked on from the grid
expandImg.src = imgs.src;
// Use the value of the alt attribute of the clickable image as text inside the expanded image
imgText.innerHTML = imgs.alt;
// Show the container element (hidden with CSS)
expandImg.parentElement.style.display = "block";
}
</script>
enlarge picture by clicking it
×
code:
<div>
<h3>enlarge picture by clicking it</h3>
<div>
<!-- Trigger the Modal -->
<img id="myPhoto" src="../images/12.jpg" alt="Shanghai" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
</div>
</div>
<style>
/* Style the Image Used to Trigger the Modal */
#myPhoto {border-radius: 5px; cursor: pointer; transition: 0.3s; }
#myPhoto:hover {opacity: 0.2;}
/* The Modal (background) */
.modal {display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%;
height: 100%; overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); }
/* Modal Content (Image) */
.modal-content {margin: auto; display: block; width: 80%; max-width: 700px;}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center;
padding: 10px 0; height: 150px;}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption { animation-name: zoom; animation-duration: 0.6s; }
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {position: absolute; top: 15px; right: 35px; color: red; font-size: 48px; font-weight: bold;
transition: 0.3s;}
.close:hover, .close:focus {color: #bbb; text-decoration: none; cursor: pointer; }
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content { width: 100%; }
}
</style>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img_a = document.getElementById("myPhoto");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img_a.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
hover me
